<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE html>
<html>
  <head>
    <title>登录</title>
    <jsp:include page="/head.jsp"/>
    <link rel="stylesheet" type="text/css" href="assets/css/login.css"/>
  </head>
  <body>
    <div class="login">
      <div>
        <div>
          <div></div>
          <div class="pl-4 pr-4 pt-4">
            <h1>登 录</h1>
            <div class="reg">没有帐号？<a href="reg-2.jsp">点此注册</a></div>
            <form name="login1" class="pt-1" style="display: block;">
              <div class="form-group row mb-2">
                <div class="col-sm-12">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
                    </div>
                    <input name="userName" type="text" class="form-control" value="" placeholder="用户名">
                  </div>
                </div>
              </div>

              <div class="form-group row mb-2">
                <div class="col-sm-12">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="fa fa-fw fa-keyboard-o"></i></span>
                    </div>
                    <input name="userPassword" type="password" class="form-control" value="" placeholder="密码">
                  </div>
                </div>
              </div>

              <div class="form-group row mb-2">
                <div class="col-sm-7">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="fa fa-fw fa-image"></i></span>
                    </div>
                    <input name="code" type="text" class="form-control" value="" placeholder="验证码">
                  </div>
                </div>
                <div class="col-sm-5 p-0" style="margin-left: -15px;">
                  <img onclick="this.src='api/kaptcha?width=117&height=36&v='+new Date().getTime()" src="api/kaptcha?width=117&height=36&v=" style="width: 117px; height: 36px; cursor: pointer;" />
                </div>
              </div>

              <div class="form-group row mb-2">
                <div class="col-sm-12">
                  <button class="btn btn-block btn-danger">登 录</button>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-sm-6">
                  <a href="#">忘记密码？</a>
                </div>
                <div class="col-sm-6 text-right ">
                  <a data-form="1" href="javascript:void(0);">短信登录</a>
                </div>
              </div>
            </form>
            <form class="pt-1" style="display: none;">
              <div class="form-group row mb-2">
                <div class="col-sm-12">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="fa fa-fw fa-phone"></i></span>
                    </div>
                    <input type="text" class="form-control" value="" placeholder="手机号码">
                  </div>
                </div>
              </div>

              <div class="form-group row mb-2">
                <div class="col-sm-7">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="fa fa-fw fa-th"></i></span>
                    </div>
                    <input type="text" class="form-control" value="" placeholder="短信验证码">
                  </div>
                </div>
                <div class="col-sm-5 pl-0">
                  <button class="btn btn-block btn-outline-primary">发送验证码</button>
                </div>
              </div>

              <div class="form-group row mb-2">
                <div class="col-sm-7">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="fa fa-fw fa-image"></i></span>
                    </div>
                    <input type="text" class="form-control" value="" placeholder="验证码">
                  </div>
                </div>
                <div class="col-sm-5 p-0" style="margin-left: -15px;">
                  <img onclick="this.src='api/kaptcha?width=117&height=36&v='+new Date().getTime()" src="api/kaptcha?width=117&height=36&v=" style="width: 117px; height: 36px; cursor: pointer;" />
                </div>
              </div>

              <div class="form-group row mb-2">
                <div class="col-sm-12">
                  <button class="btn btn-block btn-danger">登 录</button>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-sm-12 text-right ">
                  <a data-form="0" href="javascript:void(0);">用户名密码登录</a>
                </div>
              </div>
            </form>
            
          </div>
        </div>
        <div><a href="#">关于我们</a> <a href="#">使用条款</a> <a href="#">帮助文档</a> <a href="#">在线自助服务</a></div>
      </div>
    </div>
    <script type="text/javascript">
     var toggleFormBtns =document.querySelectorAll("[data-form]");
     toggleFormBtns.forEach((btn)=>{
         btn.onclick=()=>{
           document.forms[btn.dataset.form=="0"?0:1].style.display="block";
           document.forms[btn.dataset.form=="1"?0:1].style.display="none";
           console.info(document.forms[btn.dataset.form=="1"?0:1]);
         }
     });
    </script>
    <script src="login-2-1.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>
